<template>
    <div class="setting-address">
        <div class="header">
            <h1 class="title">添加地址</h1>
            <span @click="back">< 返回</span>
        </div>
        <div class="amap-page-container">
            <el-amap-search-box class="search-box" :search-option="searchOption" v-model="address" :on-search-result="onSearchResult"></el-amap-search-box>
            <el-amap vid="amapDemo" :plugin="plugin" :events="events" :center="mapCenter" :zoom="12" class="amap-demo">
                <el-amap-marker v-for="marker in markers" :position="marker" ></el-amap-marker>
            </el-amap>
        </div>
        <div class="toolbar">
            <p class="bt">商家地址</p>
            <span v-if="loaded">
                <p class="adr">{{address}}</p>
            </span>
            <p v-else class="adr">{{address}}</p></p>
        </div>
        <mt-button class="btn-tj" type="primary" @click="ok">完成</mt-button>
  </div>
</template>

<script>
    export default {
        data: function() {
            var self = this
            return {
                shopinfos:{},
                markers: [
                    
                ],
                searchOption: {
                    city: '西安',
                    citylimit: true
                },
                mapCenter: [108.902901, 34.227467],
                lng: 0,
                lat: 0,
                loaded: false,
                address:'',
                plugin: [{
                    pName: 'Geolocation',
                    events: {
                        init(o) {
                            // o 是高德地图定位插件实例
                            o.getCurrentPosition((status, result) => {
                                if (result && result.position) {
                                    self.lng = result.position.lng;
                                    self.lat = result.position.lat;
                                    self.mapCenter = [self.lng, self.lat];
                                    self.loaded = true;
                                    self.$nextTick();

                                    // 这里通过高德 SDK 完成。
                                    var geocoder = new AMap.Geocoder({
                                        radius: 1000,
                                        extensions: "all"
                                    });        
                                    geocoder.getAddress([result.position.lng ,result.position.lat], function(status, result) {
                                        if (status === 'complete' && result.info === 'OK') {
                                            if (result && result.regeocode) {
                                                self.address = result.regeocode.formattedAddress;
                                                self.$nextTick();
                                            }
                                        }
                                    }); 
                                }


                            });
                        }
                    }
                }],
                events: {
                    click(e) {
                        let { lng, lat } = e.lnglat;
                        self.lng = lng;
                        self.lat = lat;
                        self.markers = []
                        // 这里通过高德 SDK 完成。
                        var geocoder = new AMap.Geocoder({
                            radius: 1000,
                            extensions: "all"
                        });        
                        geocoder.getAddress([lng ,lat], function(status, result) {
                            if (status === 'complete' && result.info === 'OK') {
                                if (result && result.regeocode) {
                                    self.address = result.regeocode.formattedAddress;
                                    self.$nextTick();
                                    self.markers.push([lng, lat]);
                                    self.mapCenter = [lng,lat];
                                }
                            }
                        });        
                    }
                },
            };
      },
      methods: {
          back(){
              this.$router.back(-1)
          },
        onSearchResult(pois) {
            this.markers = []
            console.log(pois)
        //   let latSum = 0;
        //   let lngSum = 0;
        //   if (pois.length > 0) {
        //     pois.forEach(poi => {
        //       let {lng, lat} = poi;
        //       lngSum += lng;
        //       latSum += lat;
        //       this.markers.push([poi.lng, poi.lat]);
        //     });
            let lng = pois[0].lng;
            let lat = pois[0].lat;
            this.markers.push([lng, lat]);
            this.mapCenter = [lng,lat];
            this.address = pois[0].name
            // let center = {
            //   lng: lngSum / pois.length,
            //   lat: latSum / pois.length
            // };
            // this.mapCenter = [center.lng, center.lat];
          //} 
        },
        ok(){
            let addr = this.lng + "-" + this.lat + "-" + this.address
            this.$router.push({path: '/shopsetting/', query: {addr: addr,shopinfo:this.shopinfos}})
            
        }
      },
      mounted(){
          let query = this.$route.query
          this.shopinfos = query.shopinfo
      }
    }
</script>
<style lang="stylus">
.amap-page-container
    height: 55%
    position: relative
    margin: 20px
    .search-box
        position: absolute
        top: 20px
        left: 10%
        width: 80%
.toolbar
    margin-top 10px
    .bt
        background #f1f1f1
        font-size:16px
        color #868686
        padding 10px
    .adr
        font-size:15px
        color:#333
        padding 15px
.setting-address
    background:#fff
    height:100%
    width:100%
    position:absolute
    top:0
    left:0
    z-index:10
    .btn-tj
        width 90%
        left 5%
    .mint-header
        color:rgb(104, 104, 104)
        background:#26a2ff
        border-bottom:1px solid #ccc
        font-size:18px
        letter-spacing:2px
        box-shadow: 1px 3px 5px #eee
        z-index:11
        color:#fff
        label,span
            color:#fff
    .header
        position: fixed
        top: 0
        left: 0
        height: 44px
        width: 100%
        box-shadow: 0 2px 10px 0 rgba(0,0,0,0.1)
        background-color: #fff
        z-index: 1000
        color: #666
        position relative
        .title 
            font-size: 16px
            line-height: 44px
            text-align: center
            margin: 0 auto
        span
            position: absolute
            left: 0px
            top: 4px
            font-size: 15px
            color: #26a2ff
            padding: 10px
    .input-search
        width :100%
        height:40px
        padding:0 10px
    .amap-wrapper
        height:400px
        margin:10px 20px

</style>